<!--
    我的题库
    梁
    2019年5月6日
    -->
<template lang="pug">
  kalix-master
    div.box
      div.boxLeft
        UserUnit
        Personage
      div.boxRight
        h1 我的题库
        div
          span(v-for="(item, index) in collect" @click="isName(item,index)" :class="index === isIndex?'Greens':''").question {{item.title}}
        div.upload
          span 文件上传
          span 手动添加
        div(v-if="this.isIndex === 0")
          div.center
            div.ulTitle
              template.eltemplate
                el-table(
                :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                stripe
                style="width: 100%"
                :default-sort = "{prop: 'date', order: 'descending'}"
                ).el-table
                  el-table-column(prop="date" label="序号"  width="121")
                    template(slot-scope="scope")
                      div(style="text-align: center") {{ scope.$index + 1 }}
                  el-table-column(prop="name" label="名称"  width="121")
                  el-table-column(prop="topic" label="题量"  width="121")
                  el-table-column(prop="difficulty" label="难易程度"  width="121")
                  el-table-column(prop="establish" label="创建人"  width="121")
                  el-table-column(prop="classHour" label="创建时间"  width="121")
                  el-table-column(label="操作"  width="154").right
                    template(slot-scope="scope")
                      el-button(type="text" size="small") 查看
                      el-button(type="text" size="small") 修改
                      el-button(type="text" size="small" @click="deleteRow(scope.$index, tableData)") 删除
            div.paging
              <!--el-pagination(-->
              <!--@current-change="current_change"-->
              <!--layout="prev, pager, next"-->
              <!--:total="total")-->
              el-pagination(
              @size-change="handleSizeChange"
              @current-change="current_change"
              :page-size="100"
              layout="prev, pager, next, total, jumper"
              :total="total")
        div(v-if="this.isIndex === 1")
          span 123
    div.clearfix
</template>

<script type="text/ecmascript-6">
  export default {
    name: 'MyQuestion',
    data() {
      return {
        collect: [
          {title: '考试题库'},
          {title: '作业题库'}
        ],
        isIndex: 0,
        total: 1000, // 默认数据总数
        pagesize: 10, // 每页的数据条数
        currentPage: 1, // 默认开始页面
        tableData: [
          {
            date: 1,
            name: '学习计划',
            topic: 10,
            difficulty: '难',
            establish: '授课教师',
            classHour: '2019-02-20'
          },
          {
            date: 1,
            name: '学习计划',
            topic: 10,
            difficulty: '难',
            establish: '授课教师',
            classHour: '2019-02-20'
          },
          {
            date: 1,
            name: '学习计划',
            topic: 10,
            difficulty: '难',
            establish: '授课教师',
            classHour: '2019-02-20'
          },
          {
            date: 1,
            name: '学习计划',
            topic: 10,
            difficulty: '难',
            establish: '授课教师',
            classHour: '2019-02-20'
          },
          {
            date: 1,
            name: '学习计划',
            topic: 10,
            difficulty: '难',
            establish: '授课教师',
            classHour: '2019-02-20'
          },
          {
            date: 1,
            name: '学习计划',
            topic: 10,
            difficulty: '难',
            establish: '授课教师',
            classHour: '2019-02-20'
          },
          {
            date: 1,
            name: '学习计划',
            topic: 10,
            difficulty: '难',
            establish: '授课教师',
            classHour: '2019-02-20'
          },
          {
            date: 1,
            name: '学习计划',
            topic: 10,
            difficulty: '难',
            establish: '授课教师',
            classHour: '2019-02-20'
          },
          {
            date: 1,
            name: '学习计划',
            topic: 10,
            difficulty: '难',
            establish: '授课教师',
            classHour: '2019-02-20'
          },
          {
            date: 1,
            name: '学习计划',
            topic: 10,
            difficulty: '难',
            establish: '授课教师',
            classHour: '2019-02-20'
          },
          {
            date: 1,
            name: '学习计划',
            topic: 10,
            difficulty: '难',
            establish: '授课教师',
            classHour: '2019-02-20'
          },
          {
            date: 1,
            name: '学习计划',
            topic: 10,
            difficulty: '难',
            establish: '授课教师',
            classHour: '2019-02-20'
          }
        ]
      }
    },
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`)
      },
      isName(item, index) {
        this.isIndex = index
      },
      current_change: function (currentPage) {
        this.currentPage = currentPage
      },
      deleteRow(index, rows) {
        rows.splice(index, 1)
      },
      handleClick(row) {
        console.log(row)
      }
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .clearfix::after
    content ""
    clear both
    display block
    overflow hidden
    font-size 0
    height 0

  .box
    width 1200px
    margin 5px auto

  h1
    font-size 20px
    color #FF9933
    margin-bottom 20px

  .question
    font-size 18px
    margin-right 50px
    cursor pointer

  .Greens
    color #FF9F33
    font-weight 700

  .upload
    width 850px
    text-align right
    span
      margin-left 14px
      cursor pointer
    span:hover
      color #FF9F33

  .center
    height 700px
    position relative

  .paging
    position absolute
    left 50%
    bottom 10px
    margin-left -355px

  .boxLeft
    width 247px
    height 1471px
    float left

  .boxRight
    width 926px
    height 1471px
    border 1px solid #ccc
    border-radius 5px
    float right
    padding 20px 20px 0 24px
    box-sizing border-box

  .boxLeftBottom
    width 247px
    height 1140px
    .personage
      display block
      width 247px
      height 60px
      line-height 60px
      text-align center
      border 1px solid #ccc
      background-color #F2F2F2
      cursor pointer
      position relative
      -o-user-select none /*文字禁止被选中*/
      -moz-user-select none /*火狐 firefox*/
      -webkit-user-select none /*webkit浏览器*/
      -ms-user-select none /*IE10+*/
      -khtml-user-select none /*早期的浏览器*/
      user-select none
      .icon
        position absolute
        width 20px
        height 20px
        top 1px
        left 56px
        font-size 22px
        color #333333
    .listBorder
      border none
      border-left 4px solid #FF9933
      background-color #fff
      span
        color #FF9933 !important
    .text
      color #666666
      font-size 18px
</style>
<style lang="stylus" rel="stylesheet/stylus">
  .el-table--enable-row-transition .el-table__body td
    font-size 12px

  .ulTitle .el-table .cell
    text-align center
</style>
